<template>
  <div style="padding: 20px">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="16" :offset="0">
        <el-card shadow="never">
          <div slot="header">
            <span>基本信息</span>
          </div>
          <pjForm ref="pjForm" @submitAdd="submitAdd" @submitEdit="submitEdit"></pjForm>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :offset="0">
        <el-card shadow="never">
          <div slot="header">
            <span>商品属性</span>
          </div>
          <attributeTable ref="attributeTable"></attributeTable>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16" :offset="0">
        <el-card shadow="hover">
          <div slot="header">
            <span>商品详情</span>
          </div>
          <Editor ref="Editor"></Editor>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" :offset="0">
        <UploadImg ref="UploadImg"></UploadImg>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tableMixin from "@/mixins";
import pjForm from "../common/pjForm.vue";
import Upload from "@/components/uplaod/upload.vue";
import Editor from "@/components/editor/editor.vue";
import AttributeTable from "../common/AttributeTable.vue";
import UploadImg from "../common/UploadImg.vue";
import { add, detail,edit } from "@/api/pj";
import { Message } from "element-ui";

export default {
  mixins: [tableMixin],
  components: {
    pjForm,
    Upload,
    Editor,
    AttributeTable,
    UploadImg,
  },
  data() {
    return {
      type: this.$route.query.type,
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.initDetail();
    }
  },
  methods: {
    // 获取详情
    async initDetail() {
      const res = await detail({ id: this.$route.query.id });
      if(!res.status){
        if(res.content.imgs){
          this.$refs.UploadImg.set(JSON.parse(res.content.imgs)) 
        }
        if(res.content.extra){
          this.$refs.attributeTable.set(JSON.parse(res.content.extra)) 
        }
        if(res.content.detail){
          this.$refs.Editor.set(res.content.detail) 
        }
        this.$refs.pjForm.set(res.content)
      }
    },
    async submitAdd(data) {
      let params = { ...data };
      params.imgs = JSON.stringify(this.$refs.UploadImg.list);
      params.detail = this.$refs.Editor.content;
      params.extra = JSON.stringify(this.$refs.attributeTable.get());
      params.state = 1;
      console.log(params, "参数");
      const res = await add(params);
      if (!res.status) {
        Message.success("添加成功");
        this.$router.push("/ProductAdmin/pjProduct");
      }
    },
    async submitEdit(data){
      let params = { ...data };
      params.imgs = JSON.stringify(this.$refs.UploadImg.list);
      params.detail = this.$refs.Editor.content;
      params.extra = JSON.stringify(this.$refs.attributeTable.get());
      params.state = 1;
      console.log(params, "参数");
      const res = await edit(params);
      if (!res.status) {
        Message.success("修改成功");
        this.$router.push("/ProductAdmin/pjProduct");
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 10px;
}

.footer_card {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 8px;
}
</style>
